<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <title>米塔云平台管理系统</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../layuiadmin/layui/css/layui.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        #typeListTree {
            height: 780px;
            overflow-y: auto;
        }

        a {
            color: #007bff;
        }

        a:hover {
            color: #0056b3;
        }

        #groupListTree {
            height: 750px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="m-3">
    <nav class="mb-3 custom-section">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><i class="iconfont icon-xiaolan4"></i> 企业管理</li>
            <li class="breadcrumb-item active"><i class="iconfont icon-shebeifenzuguanli"></i> 设备分组管理</li>
        </ol>
    </nav>
    <button shiro:hasPermission="enterprise:group:poera" class="btn btn-primary mb-3" type="button"
            onclick="addGroup()"><i class="fa fa-plus"></i> 添加设备分组
    </button>
    <div class="d-flex">
        <div class="custom-section" style="width: 296px;">
            <div class="font-weight-bold mb-3">设备分组列表</div>
            <div class="font-p14" id="groupListTree"></div>
        </div>
        <div class="ml-3 flex-1">
            <div class="custom-section mb-3">
                <div class="font-weight-bold mb-3">分组权限人员</div>
                <div class="font-p14 mb-3" id="groupUserList">暂未有人员分配至该分组权限！</div>
                <div class="font-weight-bold mb-3">分组描述</div>
                <div class="font-p14" id="groupDesc">暂无描述</div>
            </div>
            <div class="custom-section">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div>
                        <div class="input-group">
                            <input type="text" class="form-control" id="searchValue" placeholder="快捷查询">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button" onclick="loadDeviceList()"><i
                                        class="iconfont icon-dituyechaxun"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div shiro:hasPermission="enterprise:group:poera">
                        <button class="btn btn-primary" type="button" onclick="addDevice()"><i class="fa fa-plus"></i>
                            添加生产设备
                        </button>
                    </div>
                </div>
                <table class="table table-striped table-bordered table-center" id="deviceList">

                </table>
                <div id="page" class="page_div"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addGroupModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="width: 545px;max-width: 545px;">
        <form class="modal-content text-body" id="addGroupForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span id="modal_title">新建分组</span></div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-secondary font-p12 mb-3">注：带<span class="form-required">*</span><span
                        class="ml-3"></span>标识的为必填项
                </div>
                <div class="px-3">
                    <div class="form-group">
                        <label for="validationCustom01">分组名称<span class="form-required">*</span></label>
                        <input class="form-control" name="name" type="text" id="validationCustom01">
                        <input name="id" type="hidden" id="groupID">
                    </div>
                    <div class="form-group ">
                        <label for="validationCustom02">分组描述</label>
                        <textarea class="form-control" name="desc" id="validationCustom02" row="3"></textarea>
                    </div>
                    <div class="form-group ">
                        <label for="validationCustom02">分组权限人员</label>
                        <div id="transfer"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">提交保存</button>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="addDeviceModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="width: 545px;max-width: 545px;">
        <form class="modal-content text-body" id="addDeviceForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span>添加生产设备</span></div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="px-3 font-p14">
                    <div id="deviceListTree"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitDevice()">提交保存</button>
            </div>
        </form>
    </div>
</div>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../layuiadmin/layui/layui.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/deviceGroup.js"></script>
<script>
    var enterpriseGroupView = false;
    var enterpriseGroupPoera = false;
    var title = ['#', '设备编号', '设备名称', '设备类型', '采集设备编号'];
    var label = ['order', 'sn', 'name', 'deviceTypeName', 'ceqNumber'];
    var path = "/device/getDeviceProduceByEnterpise";
</script>
<shiro:hasPermission name="enterprise:group:view">
    <script>
        enterpriseGroupView = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="enterprise:group:poera">
    <script>
        enterpriseGroupPoera = true;
        title.push('操作');
        label.push('opera');
    </script>
</shiro:hasPermission>
<shiro:hasRole name="系统管理组">
    <script>
        path = "/deviceType/selectDeviceTypeTree";
    </script>
</shiro:hasRole>
</body>
</html>